<template>
  <div class="chart-main-card">
    <div class="title">月度航行记录</div>
    <div class="chart-main-content">
      <div class="total-item" v-for="item in list" :key="item.prop">
        <div
          class="total-icon iconfont"
          v-html="item.icon"
          :style="`color: ${item.color}`"
        ></div>
        <div class="total-content">
          <div class="total-name">{{ item.name }}</div>
          <div class="total-value">
            <div class="total-number" :style="`color: ${item.color}`">
              {{ info[item.prop] }}
            </div>
            <div class="total-util">{{ item.util }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          sailDistance: 0,
          fuelConsumption: 0,
        };
      },
    },
  },
  computed: {
    info() {
      const { sailDistance, fuelConsumption } = this.data;
      if (sailDistance && fuelConsumption) {
        return {
          sailDistance,
          fuelConsumption,
          fuelConsumptionMile: fuelConsumption / sailDistance,
          carbonEmissionsMile: (fuelConsumption / sailDistance) * 3.15,
        };
      } else {
        return {
          sailDistance: 1242,
          fuelConsumption: 12272,
          fuelConsumptionMile: 56,
          carbonEmissionsMile: 123,
        };
      }
    },
  },
  data() {
    return {
      list: [
        {
          name: "当月总里程",
          nameEn: "Monthly Total Mileage",
          icon: "&#xe687;",
          prop: "sailDistance",
          util: "NM",
          color: "#FF6F46",
        },
        {
          name: "当月总耗油量",
          nameEn: "Monthly Total F.O. Consumption",
          icon: "&#xe6d8;",
          prop: "fuelConsumption",
          util: "T",
          color: "#0DCAD0",
        },
        {
          name: "每海里耗油量",
          nameEn: "F.O. Consumption per NM",
          icon: "&#xe6d7;",
          prop: "fuelConsumptionMile",
          util: "T/NM",
          color: "#BDCB3A",
        },
        {
          name: "每海里碳排放",
          nameEn: "CO₂ Emission per NM",
          icon: "&#xe727;",
          prop: "carbonEmissionsMile",
          util: "T/NM",
          color: "#3B83F9",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.chart-main-content {
  width: 100%;
  height: calc(100% - 20px);
  padding: 10px 15px 15px 15px;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 10px));
  grid-template-rows: repeat(2, calc(50% - 10px));
  grid-column-gap: 20px;
  grid-row-gap: 10px;
  .total-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .total-icon {
      width: 50px;
      font-size: 45px;
      text-shadow: 2px 2px 2px #000;
    }
    .total-content {
      width: calc(100% - 50px - 10px);
      .total-name {
        text-align: center;
        font-size: 16px;
      }
      .total-value {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        .total-number {
          font-size: 30px;
          font-weight: 700;
          text-shadow: 2px 2px 2px #000;
          height: 40px;
          line-height: 40px;
        }
        .total-util {
          font-size: 14px;
          color: #bbb;
          margin-left: 8px;
          height: 40px;
          line-height: 50px;
        }
      }
    }
  }
}
</style>
